<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="budget">
    <h2>经费预算</h2>
    <div class="top">
      <div class="left">
        <p>(预算)支持经费:</p>
        <div class="text" v-html="supportFunding.budget" />
      </div>
      <div class="right">
        <p>(批准)支持经费:</p>
        <div class="text" v-html="supportFunding.ratify" />
      </div>
    </div>
    <div class="body">
      <el-table :data="budgetData" style="width: 96%">
        <el-table-column align="center" prop="name" label="开支科目" />
        <el-table-column align="center" prop="budgetFunds" label="预算经费" />
        <el-table-column align="center" prop="purpose" label="主要用途" />
        <el-table-column align="center" label="阶段下达经费计划(元)">
          <el-table-column align="center" prop="previousStage" label="前半阶段" width="120" />
          <el-table-column align="center" prop="postStage" label="后半阶段" width="120" />
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const supportFunding = ref({
  budget: '20000.00',
  ratify: '20000.00'
})
const budgetData = ref([
  {
    name: '预算经费总额',
    budgetFunds: '	20000.00',
    purpose: '	项目运营与设备购置',
    previousStage: '	7800.00',
    postStage: '	12200.00'
  },
  {
    name: '1. 业务费',
    budgetFunds: '	17000.00',
    purpose: '	项目执行与日常运营',
    previousStage: '	6000.00',
    postStage: '	11000.00'
  },
  {
    name: '（1）计算、分析、测试费',
    budgetFunds: '	1000.00',
    purpose: '	系统测试 元件维修',
    previousStage: '	500.00',
    postStage: '	500.00'
  },
  {
    name: '（2）能源动力费',
    budgetFunds: '	2000.00',
    purpose: '	电池、电池充电',
    previousStage: '	1000.00',
    postStage: '	1000.00'
  },
  {
    name: '（3）会议、差旅费',
    budgetFunds: '	7000.00',
    purpose: '	观光车的运输、车辆维护',
    previousStage: '	3500.00',
    postStage: '	3500.00'
  },
  {
    name: '（4）文献检索费',
    budgetFunds: '	2000.00',
    purpose: '	文献检索',
    previousStage: '	1000.00',
    postStage: '	1000.00'
  },
  {
    name: '（5）论文出版费',
    budgetFunds: '	5000.00',
    purpose: '	审稿费+版面费',
    previousStage: '	0.00',
    postStage: '	5000.00'
  },
  {
    name: '2. 仪器设备购置费',
    budgetFunds: '	1000.00',
    purpose: '	和项目相关电子设备购买',
    previousStage: '	500.00',
    postStage: '	500.00'
  },
  {
    name: '3. 实验装置试制费',
    budgetFunds: '	1000.00',
    purpose: '	和项目相关的实验室设备',
    previousStage: '	500.00',
    postStage: '	500.00'
  },
  {
    name: '4. 材料费',
    budgetFunds: '	1000.00',
    purpose: '	电机、舵机、遥控器等，结构零件',
    previousStage: '	800.00',
    postStage: '	200.00'
  }
])

// 预算经费总额
// 	20000.00
// 	项目运营与设备购置
// 	7800.00
// 	12200.00
// 1. 业务费
// 	17000.00
// 	项目执行与日常运营
// 	6000.00
// 	11000.00
// （1）计算、分析、测试费
// 	1000.00
// 	系统测试 元件维修
// 	500.00
// 	500.00
// （2）能源动力费
// 	2000.00
// 	电池、电池充电
// 	1000.00
// 	1000.00
// （3）会议、差旅费
// 	7000.00
// 	观光车的运输、车辆维护
// 	3500.00
// 	3500.00
// （4）文献检索费
// 	2000.00
// 	文献检索
// 	1000.00
// 	1000.00
// （5）论文出版费
// 	5000.00
// 	审稿费+版面费
// 	0.00
// 	5000.00
// 2. 仪器设备购置费
// 	1000.00
// 	和项目相关电子设备购买
// 	500.00
// 	500.00
// 3. 实验装置试制费
// 	1000.00
// 	和项目相关的实验室设备
// 	500.00
// 	500.00
// 4. 材料费
// 	1000.00
// 	电机、舵机、遥控器等，结构零件
// 	800.00
// 	200.00
</script>

<style lang="less" scoped>
.budget {
  h2 {
    color: #5d78ff;
    margin-bottom: 30px;
  }
  .top {
    display: flex;
    justify-content: start;
    margin: 30px 0;
    p {
      color: #5d78ff;
    }
    .left {
      width: 46%;
      margin-right: 4%;
    }
    .right {
      width: 46%;
    }
    .text {
      padding: 10px 20px;
      margin-top: 10px;
      cursor: text;
      border: 1px solid #ccc;
      border-radius: 5px;
      width: 100%;
      background-color: #f5f7fa;
      font-size: 13px;
      color: #707276;
    }
  }
  .body {
    margin-bottom: 50px;
  }
}
</style>
